<template>
    <div v-loading="loading" style="margin-top: 70px;">
        <div class="loss">
        <el-table
            :data="state.tableData"
            style="width: 100%; padding: 15px; padding-top: 0px"
            :header-cell-style="{
                backgroundColor: 'var(--tableheaderback)',
                color: 'var(--tableheadercolor)',
                border: '2px solid var(--tableborder)',
            }"
            :cell-style="{ border: '2px solid var(--tableborder)' }"
            :row-class-name="rowStyle"
            border
            stripe
        >
        <el-table-column min-width="250px" v-for="(item, index) in state.oldList1" :label="item.label" :prop="state.columns[0].prop"  :key="`col_${index}`" align="center"></el-table-column>
            <el-table-column
                v-for="(item, index) in state.oldList"
                :key="`col_${index}`"
                :prop="state.columns[index+1].prop"
                :label="item.label"
                align="center"
            ></el-table-column>
        </el-table>
    </div>

    <div class="remark">
        <div>{{ Remark }}</div>
        <div>{{ RM_Unqualified }}</div>
        <div>{{ RM_Qualified }}</div>
        <div>
            {{ RM_Adverse }}
        </div>
    </div>
    <div class="zhanwei" style="height: 50px; width: 100vw"></div>
    </div>
   
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed, watch } from 'vue';
import X2js from 'x2js';
import { getProfileLoss } from '@/api/axios/reqTest';
import Sortable from 'sortablejs';
const RM_Adverse = ref('');
const RM_Qualified = ref('');
const RM_Unqualified = ref('');
const Remark = ref('');
const loading = ref(false)
const arr: any = [];
const state = reactive({
    oldList: [
        {
            label: '',
            prop: 'three',
        },
        {
            label: '',
            prop: 'four',
        },
        {
            label: '',
            prop: 'five',
        },
        {
            label: '',
            prop: 'six',
        },
        {
            label: '',
            prop: 'seven',
        },
    ],
    oldList1: [
        {
            label: '',
            prop: 'two',
        },
    ],
    columns: [
        {
            label: '',
            prop: 'two',
        },
        {
            label: '',
            prop: 'three',
        },
        {
            label: '',
            prop: 'four',
        },
        {
            label: '',
            prop: 'five',
        },
        {
            label: '',
            prop: 'six',
        },
        {
            label: '',
            prop: 'seven',
        },
    ],
    tableData: [
        {
            two: '',
            three: '',
            four: '',
            five: '',
            six: '',
            seven: '',
        },
    ],
    tableConfig: {
        tableItems: [
            {
                label: '',
                prop: 'two',
            },
            {
                label: '',
                prop: 'three',
            },
            {
                label: '',
                prop: 'four',
            },
            {
                label: '',
                prop: 'five',
            },
            {
                label: '',
                prop: 'six',
            },
            {
                label: '',
                prop: 'seven',
            },
        ],
    },
});
onMounted(() => {
    test();
   // columnDrop1();
});
const test = async () => {
    const x2js = new X2js();
    loading.value = true
    const xml = await getProfileLoss();
    const json = x2js.xml2js(xml as any);
    console.log(json);
    const result: any = json;
    const data = result.ProfitLossAccount.GrpProfitAndLoss.PLoss;
    RM_Adverse.value = result.ProfitLossAccount.GrpRemarks.Remarks.RM_Adverse;
    RM_Qualified.value = result.ProfitLossAccount.GrpRemarks.Remarks.RM_Qualified;
    RM_Unqualified.value = result.ProfitLossAccount.GrpRemarks.Remarks.RM_Unqualified;
    Remark.value = result.ProfitLossAccount.GrpRemarks.Remarks.Remark;
    delete data[0]['_header'];
    delete data[9]['_header'];
    data.forEach((item: any, index: number) => {
        // console.log(item);

        const entries: any = Object.entries(item);

        arr.push({});
        const composedArr = [...entries[0][1]];
    //    console.log(entries[0][1]);
        
        composedArr.forEach((value: any, index2: number) => {
            const objKey = ['two', 'three', 'four', 'five', 'six', 'seven'];
            arr[index][objKey[index2]] = value;
       //     console.log(arr[index][objKey[0]] );
        });
    });
    state.tableData = arr.filter((item: any, index: number) => index);
    const label = ref();
    label.value = Object.values(arr[0]).map((item: any) => {
       // console.log(item);
        
        return item;
    });
    state.oldList1.forEach((item: any, index: number) => {
        item.label = label.value[0];
    });
    state.oldList.forEach((item: any, index: number) => {
        item.label = label.value[index+1];
    });
    loading.value = false
};
const rowStyle = ({ row, rowIndex }: any) => {
   // console.log(row, rowIndex);
    const regx = /(\d{2})\/(\d{4})/g.test(row.three);
  //  console.log(regx);
    if (regx) {
        return 'warning-row';
    } else {
        return 'success-row';
    }
};
const columnDrop1 = () => {
    //console.log(111)

    const tHeader = document.querySelector(`.loss .el-table__header-wrapper tr`) as HTMLElement;
    console.log('tHeader', tHeader);
    Sortable.create(tHeader, {
        animation: 180,
        /** 延迟 */
        // delay: 1,
        filter: '.disabled',
        onEnd: (evt: any) => {
            const oldItem = state.columns[evt.oldIndex];
            state.columns.splice(evt.oldIndex, 1);
            state.columns.splice(evt.newIndex, 0, oldItem);
        },
    });
};
</script>

<style scoped lang="scss">
.remark {
    padding: 15px;
    color: #9e9e9f;
}
// :deep(.el-table .warning-row) {
//   background-color: red ;
// }
// :deep(.el-table .success-row ){
//   background-color: green;
// }
</style>
<style>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--tableheaderback) !important;
}
.el-table .warning-row > td.el-table__cell {
    background-color: var(--tableheaderback) !important;
}
.el-table tbody tr:hover > td {
    background-color: transparent !important;
}
.el-table__body tr.hover-row > td {
    background-color: transparent !important;
}
</style>
